<template>
  <dx-Wrap :name="name" style="height: 33.33%;background: none">
    <template v-slot:content>
      <div :id="echartsId" class="pieCls" ref="pieChart"></div>
<!--      <div class="top-list">-->
<!--        <div class="top-itme">高风险占比TOP3</div>-->
<!--        <div class="top-itme">1.长寿路</div>-->
<!--        <div class="top-itme">2.石泉路</div>-->
<!--        <div class="top-itme">3.长风新村</div>-->
<!--      </div>-->
    </template>
  </dx-Wrap>
</template>

<script>
  import dxWrap from "@/components/customComponents/dxWrap.component.vue";
  import API from "@/api/index.api";
  export default {
    name: 'echartsPie3',
    components: {
      dxWrap
    },
    props: ['name'],
    data () {
      return {
        echartsId: 'echartsPie'+Math.random(),
        chartData: [
          { value: 235, name: '高风险' },
          { value: 274, name: '中风险' },
          { value: 310, name: '低风险' },
        ],
        chart: null,
        timer: null,
      }
    },
    methods: {
      initPieEchart() {
        let params ={type:this.name};
        API.active_type_pie(params).then(res=>{
          this.chartData=res.content;
          this.initChart ();
        })
      },
      initChart() {
        var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
        let option = {
          title: {
            // text: 'pieChart',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 20
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [{
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['24%', '55%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'outside',
              // formatter: '{a|{b}：{d}%}\n{hr|}',
              formatter: function(params) {
                // 使用 \n 实现换行
                return `${params.name}\n${params.percent}%`;
              },

              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12]
                },
                a: {
                  padding: [-30, 15, -20, 15]
                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: this.chartData,
          }]
        };
        this.chart = this.$echarts.init(document.getElementById(this.echartsId))
        this.chart.setOption(option);

      },
    },
    mounted () {
      this.initPieEchart();
      //this.initChart();
      window.addEventListener('resize', () => {
        this.chart && this.chart.resize();
      });
    },
    beforeDestroy() {
      window.removeEventListener('resize', () => {
        this.chart && this.chart.resize();
      });
      this.chart && this.chart.dispose();
    }
  }
</script>

<style lang="stylus" scoped>
  .pieCls{
    width: 100%;
    height: 100%;
  }
  .top-list{
    position: absolute;
    right: 120px;
    top: 200px;
    color: #73DDFF;
    font-size: 24px;
    .top-itme{
      margin-top: 15px;
    }
  }

</style>